<template>
  <div class="flex flex-col">
    <div class="flex">
      <div class="w-60 h-60 bg-primary rounded-6 flex flex-col justify-center items-center text-white">
        <div class="i-mdi:application w-30 h-30"></div>
        <span>primary</span>
      </div>
      <div class="w-60 h-60 ml-10 bg-success rounded-6 flex flex-col justify-center items-center text-white">
        <div class="i-mdi:check-circle-outline  w-30 h-30"></div>
        <span>success</span>
      </div>
      <div class="w-60 h-60 ml-10 bg-warning rounded-6 flex flex-col justify-center items-center text-white">
        <div class="i-mdi:alarm-note w-30 h-30"></div>
        <span>warning</span>
      </div>
      <div class="w-60 h-60 ml-10 bg-danger rounded-6 flex flex-col justify-center items-center text-white">
        <div class="i-mdi:close-octagon w-30 h-30"></div>
        <span>danger</span>
      </div>
      <div class="w-60 h-60 ml-10 bg-error rounded-6 flex flex-col justify-center items-center text-white">
        <div class="i-mdi:alert-circle w-30 h-30"></div>
        <span>error</span>
      </div>
      <div class="w-60 h-60 ml-10 bg-info rounded-6 flex flex-col justify-center items-center text-white">
        <div class="i-mdi:information-variant-box w-30 h-30"></div>
        <span>info</span>
      </div>
      <div class="w-60 h-60 ml-10 bg-error rounded-6 text-center line-height-60 text-white">error</div>
    </div>
    <video v-for="(item) in 6" :key="item" :src="textVideo" style="height: 400px;width: 600px;" controls autoplay muted></video>
    <!-- <div class="w%100 h-250 mt-10 bg-lime rounded p-10"> -->
      <!-- <el-button size="small" type="primary">button</el-button> -->
      <!-- <div class="audio-box">
        <tp-audio :src="audioUrl"></tp-audio>
      </div>
      <div class="">
        <tp-video :src="videoUrl"></tp-video>
      </div> -->
    <!-- </div> -->
    <div class="w%100 h-250 mt-10 bg-lime rounded-6"></div>
  </div>
</template>
<script setup lang="ts">
import textVideo from '@/assets/video/1.mp4'
import TpVideo from '@/components/PhotoEdit/index.vue'
onMounted(() => {

})
</script>

<style lang="scss" scoped>
.audio-box {
  width: 300px;
  margin: 0 auto;
}
</style>
